<template>
  <view>
    <view
      class="search-nav"
      :style="{
        paddingTop: statusBarHeight + 'px',
      }"
    >
      <view
        class="nav-head"
        :style="{
          height: '80rpx',
        }"
      >
        <view class="back-icon" @click="goBack">
          <image :src="asyncImgs.images.left_arrow_icon" mode="" />
        </view>
        <view
          class="search-input flex-y-center"
          :style="{ borderRadius: '40rpx' }"
        >
          <u-search
            :placeholder="$t('common.searchText')"
            :clearabled="true"
            :focus="true"
            v-model="searchVal"
            :show-action="false"
            @search="gotoSearch"
            @clear="clearSearch"
            @change="searchChange"
            @focus="searchFocus"
            @blur="searchBlur"
            style="width: 100%"
          ></u-search>
        </view>
      </view>
    </view>

    <!-- 占位,因为固定定位没有占用 -->
    <view
      :style="{
        paddingTop: statusBarHeight + 'px',
        paddingBottom: '80rpx',
      }"
    ></view>
  </view>
</template>

<script>
export default {
  props: {
    searchValue: {
      type: String,
      default: "",
    },
  },
  watch: {
    searchValue(val) {
      this.searchVal = val;
    },
  },
  data() {
    return {
      menuButtonInfo: {},
      systemInfo: {},
      searchVal: "",
    };
  },
  created() {
    uni.getSystemInfo({
      success: (res) => {
        this.systemInfo = res;
      },
    });
  },
  computed: {},
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    // 点击确定搜索
    gotoSearch() {
      this.$emit("gotoSearch", {
        val: this.searchVal,
      });
    },
    // 清空搜素
    clearSearch() {
      this.$emit("clearSearch");
    },
    // 搜索内容变化监听
    searchChange(e) {
      this.$emit("searchChange", {
        val: this.searchVal,
      });
    },
    // 获取焦点时
    searchFocus(e) {
      this.$emit("searchFocus", {
        val: this.searchVal,
      });
    },
    // 失去焦点时触发
    searchBlur(e) {
      this.$emit("searchBlur", {
        val: this.searchVal,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.search-nav {
  width: 100%;
  background-color: #ffffff;
  font-family: PingFang SC;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 201;

  .nav-head {
    display: flex;
    align-items: center;

    .back-icon {
      width: 90rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 36rpx;
        height: 36rpx;
        display: block;
      }
    }

    .search-input {
      flex: 1;
      padding-right: 30%;
      overflow: hidden;
      height: 100%;

      input {
        width: 100%;
        height: 100%;
        background: #f2f2f2;
        font-size: 28rpx;
        font-weight: 400;
        padding: 0 20rpx;
        box-sizing: border-box;
      }
    }
  }
}

.search-nav::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
</style>
